<template>
  <div class="brand">
    <div class="header">
      <van-nav-bar title="品牌公寓" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon name="search" size="21" />
        </template>
      </van-nav-bar>
    </div>

    <div class="header-img">
      <img src="../assets/img/brand-01.png" alt="" />
      <img src="../assets/img/brand-02.png" alt="" class="margin-left" />
      <img src="../assets/img/brand-03.png" alt="" class="margin-left" />
      <img src="../assets/img/brand-04.png" alt="" class="margin-left" />
    </div>

    <div class="nav">
      <van-sticky>
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="state.value1"
            :options="option1"
            @click="changexianlu(option1, state.value1)"
          />
          <van-dropdown-item
            v-model="state.value2"
            :options="option2"
            @click="changediqu(option2, state.value2)"
          />
          <van-dropdown-item v-model="state.value3" :options="option3" />
          <van-dropdown-item v-model="state.value4" :options="option4" />
          <van-dropdown-item
            v-model="state.value5"
            :options="option5"
            @click="changePrice(state.value5)"
          />
        </van-dropdown-menu>
      </van-sticky>
    </div>

    <ul>
      <li class="li1">独卫</li>
      <li class="li2">租金月付</li>
      <li class="li2">精品房型</li>
      <li class="li2">品牌优选</li>
    </ul>

    <div class="list" v-for="item in list" :key="item.id">
      <div class="left" @click="goDetail(item.house_id)">
        <img :src="item.imgUrl" alt="" />
        <p>房东提供·{{ item.provide }}</p>
      </div>
      <div class="center" @click="goDetail(item.house_id)">
        <div class="center-top">
          <span>{{ item.lease }}</span>
          <span>{{ item.apartment }}</span>
        </div>
        <p>{{ item.area }}m²·{{ item.face }}</p>
        <div class="center-center">
          <img src="../assets/img/brand-05.png" alt="" />
          <span>{{ item.position }}</span>
        </div>
        <div class="center-bottom">
          <span>{{ item.inform[3] }}</span>
          <span>{{ item.type }}</span>
          <span>{{ item.inform[1] }}</span>
        </div>
        <p class="price">{{ item.price }}&nbsp;<span>元</span></p>
      </div>
      <div
        class="right"
        @click="goWishlist($event, item.house_id)"
        :src="likeimgsrc(item.house_id)"
      >
        <img :src="likeimgsrc(item.house_id)" class="like" />
      </div>
    </div>
  </div>
</template>

<script>
// import { Toast } from "vant";
import { reactive, computed } from "vue";
// import { mapState, mapActions } from "vuex";
import {
  getRenderData,
  priceAscOrder,
  priceDescOrder,
  collectHouseData,
  chioceData,
} from "../utils/app";

export default {
  setup() {
    const likeimgsrc = computed(() => (el) => {
      // console.log(el);
      if (
        localStorage.getItem("token") &&
        localStorage.getItem("token") != ""
      ) {
        const gathers = JSON.parse(localStorage.getItem("gather"));
        if (gathers.includes(el)) {
          return require("@/assets/img/index/like2.png");
        } else {
          return state.likeimg;
        }
      } else {
        return state.likeimg;
      }
    });
    const state = reactive({
      value1: 0,
      value2: "0",
      value3: "10",
      value4: "20",
      value5: "0",
      likeimg: require("@/assets/img/brand-06.png"),
    });

    const option1 = [
      { text: "地铁", value: 0 },
      { text: "一号线", value: 1 },
      { text: "二号线", value: 2 },
      { text: "三号线", value: 3 },
      { text: "四号线", value: 4 },
      { text: "五号线", value: 5 },
    ];
    const option2 = [
      { text: "全部", value: "0" },
      { text: "拱墅区", value: "1" },
      { text: "萧山区", value: "2" },
      { text: "上城区", value: "3" },
      { text: "余杭区", value: "4" },
      { text: "滨江区", value: "5" },
    ];
    const option3 = [
      { text: "租金", value: "10" },
      { text: "不限", value: "11" },
      { text: "1500元以下", value: "12" },
      { text: "1500-2000元", value: "13" },
      { text: "2000-3000元", value: "14" },
      { text: "3000-4000元", value: "15" },
      { text: "4000-5000元", value: "16" },
      { text: "5000元以上", value: "17" },
    ];
    const option4 = [
      { text: "筛选", value: "20" },
      { text: "拱墅区", value: "21" },
      { text: "萧山区", value: "22" },
      { text: "上城区", value: "23" },
      { text: "余杭区", value: "24" },
      { text: "滨江区", value: "25" },
    ];
    const option5 = [
      { text: "排序", value: "0" },
      { text: "默认", value: "1" },
      { text: "价格↑", value: "2" },
      { text: "价格↓", value: "3" },
    ];

    return {
      state,
      option1,
      option2,
      option3,
      option4,
      option5,
      likeimgsrc,
    };
  },
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.changePrice();
  },

  methods: {
    async changexianlu(option1, value) {
      // console.log(option1[value].text);
      // console.log(value);
      // console.log(value);
      if (value == 0) {
        const res = await chioceData({
          route: ["一号线", "二号线", "三号线", "四号线", "五号线"],
          region: ["拱墅区", "萧山区", "上城区", "余杭区", "滨江区"],
        });
        // console.log(res);
        this.list = res.list;
      } else {
        const res = await chioceData({
          route: option1[value].text,
          region: ["拱墅区", "萧山区", "上城区", "余杭区", "滨江区"],
        });
        // console.log(res);
        this.list = res.list;
      }
    },

    async changediqu(option2, value) {
      // console.log(option2[value].text);
      if (value == 0) {
        const res = await getRenderData(value);
        this.list = res.result;
      } else {
        const res = await chioceData({
          route: ["一号线", "二号线", "三号线", "四号线", "五号线"],
          region: option2[value].text,
        });
        // console.log(res);
        this.list = res.list;
      }
    },

    async changePrice(value) {
      // console.log(value);
      if (value == 2) {
        const res = await priceAscOrder(value);
        this.list = res.list;
      } else if (value == 3) {
        const res = await priceDescOrder(value);
        this.list = res.list;
      } else {
        const res = await getRenderData(value);
        this.list = res.result;
      }
    },
    //左上角箭头返回首页
    onClickLeft() {
      //点击跳转至上次浏览页面
      this.$router.go(-1);
      //左上角的小箭头跳转首页
      this.$router.push("/home");
    },
    //跳转心愿单

    async goWishlist(el, id) {
      // console.log(localStorage.getItem("token"));
      if (localStorage.getItem("token")) {
        const res = await collectHouseData({
          token: window.localStorage.getItem("token"),
          gather: id,
        });
        console.log(res);
        // this.$router.push("/home/wishlist");
        // console.log(id);
        //收藏功能
        const gathers = JSON.parse(localStorage.getItem("gather"));
        if (gathers.includes(id)) {
          gathers.splice(gathers.indexOf(id), 1);
          el.target.src = require("@/assets/img/brand-06.png");
          this.$toast("取消心愿单成功!");
        } else {
          gathers.push(id);
          el.target.src = require("@/assets/img/index/like2.png");
          this.$toast("添加心愿单成功!");
        }
        // console.log(gathers);
        localStorage.setItem("gather", JSON.stringify(gathers));
      } else {
        this.$router.push("/login");
      }
    },
    //跳转详情页
    goDetail(id) {
      this.$router.push("/detail/" + id);
      // console.log(id);
    },
  },
  computed: {},
};
</script>

<style lang="less">
.brand {
  background-color: #fff;

  .header {
    // height: 75px;
    .van-nav-bar__left {
      .van-icon {
        color: #000;
      }

      .van-nav-bar__text {
        display: inline-block;
        font-size: 30px;
        color: #000;
      }
    }

    .van-nav-bar__title {
      // width: 73px;
      height: 20px;
      font-size: 19px;
      font-family: PingFang SC;
      font-weight: 500;
    }
    .van-icon-search {
      color: #000;
      font-weight: 900;
    }
  }
  .header-img {
    display: flex;
    padding: 19px 65px 17px 18px;
    // background-color: #fff;
    .margin-left {
      margin-left: 10px;
    }

    img {
      width: 65px;
      height: 66px;
      display: block;
    }
  }
  .nav {
    position: sticky;
    top: 0px;
    z-index: 100;
    .van-sticky {
      .van-dropdown-menu__bar {
        box-shadow: 0;
        font-weight: bold;
        color: #333333;
      }
    }
  }

  ul {
    display: flex;
    font-size: 13px;
    overflow: hidden;
    text-align: center;
    line-height: 28px;

    .li1 {
      width: 47px;
      height: 28px;
      margin-left: 22px;
      margin-top: 18px;
      background-color: #f6f6f6;
      border-radius: 14px;
      color: #a0a0a0;
    }

    .li2 {
      width: 75px;
      margin-left: 22px;
      margin-top: 18px;
      background: #f6f6f6;
      border-radius: 14px;
      color: #a0a0a0;
    }
  }
  .list {
    position: relative;
    display: flex;
    .left {
      width: 112px;
      height: 112px;
      margin: 21px 8px 0 14px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      p {
        text-align: center;
        width: 100%;
        font-size: 10px;
        position: absolute;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
      }
    }
    .center {
      // width: 112px;
      height: 112px;
      .center-top {
        span {
          display: inline-block;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #161616;
          margin: 22px 0 0 7px;
        }
      }
      p {
        height: 12px;
        line-height: 12px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #6c6c6c;
        margin: 8px 0 0 7px;
      }
      .center-center {
        height: 24px;
        // line-height: 24px;
        width: 200px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-left: 7px;
        img {
          width: 11px;
          height: 14px;
        }
        span {
          // display: inline-block;
          height: 12px;
          // line-height: 12px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #6c6c6c;
          margin: 5px 0 0 5px;
        }
      }
      .center-bottom {
        height: 17px;
        line-height: 17px;
        margin-top: 5px;
        span {
          // padding: 3px;
          display: inline-block;
          font-size: 11px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #868d9a;
          // height: 14px;
          // line-height: 14px;
          background-color: #ecf1f5;
          border-radius: 2px;
          margin-left: 7px;
        }
      }
      .price {
        margin-top: 12px;
        color: #e91422;
        font-size: 18px;
        font-weight: 500;
        span {
          font-size: 12px;
        }
      }
    }
    .right {
      img {
        width: 18px;
        height: 17px;
        position: absolute;
        bottom: 0;
        right: 15px;
      }
    }
  }
}
</style>
